
<template>
	<div class="watersStationList" v-loading="watersStationListLoading">
		<div class="title">站点列表</div>
    <el-table
      :data="stationListData"
      size="mini"
      border
      stripe
      style="width: 100%"
      :header-cell-style="{color: '#292929', backgroundColor: '#f1f1f1'}"
    >
      <el-table-column
        label="站点名称"
        prop="stationName"
        align="center">
      </el-table-column>
      <el-table-column
        label="站点编号"
        prop="stationNumbering"
        align="center">
      </el-table-column>
      <el-table-column
        label="地址"
        prop="stationAddress"
        align="center">
      </el-table-column>
      <el-table-column
        label="管理人"
        prop="stationUsers"
        align="center">
        <template slot-scope="scope">
          <span v-for="(item, index) of scope.row.stationUsers" :key="index">
            {{item.username}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="监测因子"
        prop="pollutionFactor"
        align="center">
      </el-table-column>
      <el-table-column
        type="expand"
        label="相关污染源企业"
        width="120"
        align="center">
        <template slot-scope="scope">
          <p class="subTit">相关污染源企业</p>
          <el-table
            :data="scope.row.pollutantSources"
            border
            style="width: 100%;margin-bottom: 35px;"
            :header-cell-style="{color: '#292929', backgroundColor: '#f1f1f1'}">
            <el-table-column
              prop="pollutantNumbering"
              label="编号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="pollutantName"
              label="名称"
              align="center">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'watersStationList',
  data () {
    return {
      msg: 'hello watersStationList!',
      watersStationListLoading: false,
		}
  },
	methods: {
    ...mapActions([
      'fetchWaterStationList'
    ]),
    routerDetail() {
      this.$router.push('/waters/stationDetail')
    }
  },
  async created() {
    this.watersStationListLoading = true
    await this.fetchWaterStationList()
    this.watersStationListLoading = false
  },
  computed: {
    ...mapGetters({
      stationListData: 'getStationListData',
    })
  },
}
</script>
<style scoped>
.watersStationList {
  background: #fff;
  min-height: 100%;
  padding: 0 20px 0 20px;
}
.watersStationList .title {
  position: relative;
  left: 20px;
  line-height: 70px;
  font-size: 16px;
}
.watersStationList .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.subTit {
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: bold;
  text-align: center;
}
</style>